<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>网易云音乐 听见好时光</title>
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/lrtk.css" />
		<style type="text/css">
			body {
				padding-top: 50px 0 0 0;
				background-color: pink;
				padding-bottom: 20px;
			}
			
			div.carousel {
				padding-top: 50px;
				margin-bottom: 60px;
			}
			/*.carousel{
    	height: 440px;
    }
    .carousel .item {
    	height: 440px;
    }*/
			
			.carousel img {
				margin-left: 15%;
				width: 50%;
			}
			
			.download {
				position: absolute;
				display: block;
				width: 200px;
				height: 45px;
				top: 21%;
				left: 65%;
			}
			
			.download img {
				width: 216px;
				height: 288px;
			}
			
			#class_container a {
				color: #333333;
				text-align: center;
			}
			
			.hr1 {
				margin: 40px 0;
				height: 3px;
				border: none;
				border-top: 3px solid red;
				" 

			}
			
			#myTab,
			#myTabContent {
				margin-left: 15%;
			}
			
			.feature {
				padding: 30px 0px;
			}
			
			.divider {
				margin: 30px 0;
				height: 1px;
				border: none;
				border-top: 1px solid #666666;
			}
			
			.btn-lg {
				color: #FFF;
			}
			
			.modal-contentl {
				background-color: pink;
				font-size: 14px;
				color: #FFFFFF;
			}
			
			#scrollUp {
				background-color: #777;
				color: #eee;
				font-size: 10px;
				text-align: center;
				text-decoration: none;
				bottom: 20px;
				right: 20px;
				overflow: hidden;
				border: none;
				opacity: .8;
			}
		</style>
	</head>

	<body>
		<!--代码-->
		<nav class="navbar navbar-default  navbar-inverse" role="navigation">
			<div class="container">
				<div class="navbar-header">

					<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
					<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
         <span class="sr-only"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
					<!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
					<a href="##" class="navbar-brand"><em>网易云音乐<em></em></a>
				</div>
				<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
				<div class="collapse navbar-collapse navbar-responsive-collapse">
					<ul class="nav navbar-nav">
						<li class="active">
							<a href="##">发现音乐</a>
						</li>
						<li>
							<a href="##">我的音乐</a>
						</li>
						<li>
							<a href="##">朋友</a>
						</li>
						<li>
							<a href="##">下载客户端<span class="label label-default" style="color: red;">hot</span></a>
						</li>
						<li>
							<!--弹出登录注册-->
							<!-- Button trigger modal -->
							<a href="##" style="font-size: 14px;" class="btn btn-link btn-lg" data-toggle="modal" data-target="#myModal">
								登录/注册
							</a>

							<!-- Modal -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
											<h4 align="center" class="modal-title" id="myModalLabel">登录</h4>
										</div>
										<div class="modal-body">
											<!--弹出内容，登录注册表单-->
											<span>
											<form class="form-horizontal" role="form">
												<div class="form-group">
													<label for="inputEmail3" class="col-sm-2 control-label">手机</label>
													<div class="col-sm-10">
														<input type="text" class="form-control" id="inputEmail3" placeholder="请输入手机号">
													</div>
												</div>
												<div class="form-group">
													<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
													<div class="col-sm-10">
														<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
													</div>
												</div>
												<div class="form-group">
													<div class="col-sm-offset-2 col-sm-10">
														<div class="checkbox">
															<label>
         													 <input type="checkbox"> 记住密码
      														  </label>
														</div>
													</div>
												</div>
												<div class="form-group">
													<div class="col-sm-offset-2 col-sm-10">
														<button type="submit" class="btn btn-default">登录</button>
													</div>
												</div>
											</span>
										</div>
										<div class="modal-footer">
											<a href="register.html" style="color: #666666;font-size: 14px;">没有帐号？注册一个</a>
										</div>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!--图片轮播-->
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
				<li data-target="#carousel-example-generic" data-slide-to="4"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="img/muc3.jpg" alt="1 slide">
				</div>
				<div class="item">
					<img src="img/muc4.jpg" alt="2 slide">
				</div>
				<div class="item">
					<img src="img/mu1.jpg" alt="3 slide">
				</div>
				<div class="item">
					<img src="img/muc2.jpg" alt="4 slide">
				</div>
				<div class="item">
					<img src="img/muc5.jpg" alt="5 slide">
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--下载-->
		<div class="download">
			<a href="#"><img src="img/dnwn1.png" /></a>
		</div>
		<!--主内容-->
		<!--网格布局-->
		<div class="container" id="class_container">
			<div class="row">
				<div class="col-md-2"></div>
				<div class="col-md-1">
					<a href="#"><strong>热门推荐</strong></a>
				</div>
				<div class="col-md-1">
					<a href="#">华语</a>
				</div>
				<div class="col-md-1">
					<a href="#">流行</a>
				</div>
				<div class="col-md-1">
					<a href="#">摇滚</a>
				</div>
				<div class="col-md-1">
					<a href="#">电子</a>
				</div>
				<div class="col-md-2">
					<a href="">更多 ></a>
				</div>
				<div class="col-md-3"></div>
			</div>
			<div class="row">
				<hr class="hr1" />
				<div class="col-md-2">
				</div>
				<div class="col-md-2">
					<!--鼠标悬停图片放大-->
					<div class="tv_hot fl">
						<a href="#" class="avatar" target="_blank" title="1">
							<img src="img/18822539555919742.jpg" alt="1" />
						</a>
					</div>
					<p>
						<a href="#">【60-80年代初】香港乐坛的别样风格</a>
					</p>
				</div>
				<div class="col-md-2">
					<div class="tv_hot fl">
						<a href="#" class="avatar" target="_blank" title="2">
							<img src="img/18532268486193256.jpg" alt="2" />
						</a>
					</div>
					<p>
						<a href="#"> ※清新小电音※让你身临其境畅游浩瀚的大海</a>
					</p>
				</div>
				<div class="col-md-2">
					<div class="tv_hot fl">
						<a href="#" class="avatar" target="_blank" title="3">
							<img src="img/1401877336349556.jpg" alt="3" />
						</a>
					</div>
					<p>
						<a href="#">听，民谣歌手的诗意告白</a>
					</p>
				</div>
				<div class="col-md-2">
					<div class="tv_hot fl">
						<a href="#" class="avatar" target="_blank" title="4">
							<img src="img/3265549580376846.jpg" alt="4" />
						</a>
					</div>
					<p>
						<a href="#"> <button style="background-color: red;">电台</button>如何假装很懂奥运? </a>
					</p>
				</div>
				<div class="col-md-2">
				</div>
			</div>
			<div class="row">
				<div class="col-md-2">
				</div>
				<div class="col-md-2">
					<div class="imgMB">
						<img src="img/2890616071712963.jpg" />
						<div class="bgtxt" style=" display:none; position: absolute; margin-top: -35%; color: #FFFFFF;">我们都喜欢的粤语歌曲</div>
					</div>
					<p>
						<a href="#">〖我所挚爱的粤语男声〗 </a>
					</p>
				</div>
				<div class="col-md-2">
					<img src="img/3439272380522231.jpg" />
					<p>
						<a href="#"> 法语乐坛8月新歌 </a>
					</p>
				</div>
				<div class="col-md-2">
					<img src="img/3427177744665514.jpg" />
					<p>
						<a href="#">一入电音深似海 | 人声 & 电音 </a>
					</p>
				</div>
				<div class="col-md-2">
					<img src="img/1418370012865049.jpg" />
					<p>
						<a href="#">什么样的爱情，才算合适 </a>
					</p>
				</div>
				<div class="col-md-2">
				</div>
			</div>
			<hr class="hr1" />
		</div>
		<!--标签页-->
		<ul id="myTab" class="nav nav-tabs" role="tablist">
			<li >
				<a href="#bulletin" role="tab" data-toggle="tab">排行榜</a>
			</li>
			<li>
				<a href="#rule" role="tab" data-toggle="tab">新碟上架</a>
			</li>
			<li>
				<a href="#forum" role="tab" data-toggle="tab">入住歌手</a>
			</li>
			<li>
				<a href="#security" role="tab" data-toggle="tab">热门DJ</a>
			</li>
		</ul>
		<!-- 选项卡面板 -->
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane active" id="bulletin">
				<div class="row feature">
					<div class="col-md-2">
						<img src="img/18822539555919742.jpg" />
						<p>
							<a href="#">【60-80年代初】香港乐坛的别样风格</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/18532268486193256.jpg" />
						<p>
							<a href="#"> ※清新小电音※让你身临其境畅游浩瀚的大海</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/1401877336349556.jpg" />
						<p>
							<a href="#">听，民谣歌手的诗意告白</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3265549580376846.jpg" />
						<p>
							<a href="#"> <button style="background-color: red;">电台</button>如何假装很懂奥运? </a>
						</p>
					</div>
					<div class="col-md-4">
					</div>
				</div>
			</div>
			<div class="tab-pane" id="rule">
				<div class="row feature">
					<div class="col-md-2">
						<img src="img/1418370012865049.jpg" />
						<p>
							<a href="#">【60-80年代初】香港乐坛的别样风格</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3439272380522231.jpg" />
						<p>
							<a href="#"> ※清新小电音※让你身临其境畅游浩瀚的大海</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3427177744665514.jpg" />
						<p>
							<a href="#">听，民谣歌手的诗意告白</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/2890616071712963.jpg" />
						<p>
							<a href="#"> <button style="background-color: red;">电台</button>如何假装很懂奥运? </a>
						</p>
					</div>
					<div class="col-md-4">
					</div>
				</div>
			</div>
			<div class="tab-pane" id="forum">
				<div class="row feature">
					<div class="col-md-2">
						<img src="img/1418370012865049.jpg" />
						<p>
							<a href="#">【60-80年代初】香港乐坛的别样风格</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3427177744665514.jpg" />
						<p>
							<a href="#"> ※清新小电音※让你身临其境畅游浩瀚的大海</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/1401877336349556.jpg" />
						<p>
							<a href="#">听，民谣歌手的诗意告白</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3265549580376846.jpg" />
						<p>
							<a href="#"> <button style="background-color: red;">电台</button>如何假装很懂奥运? </a>
						</p>
					</div>
					<div class="col-md-4">
					</div>
				</div>
			</div>
			<div class="tab-pane" id="security">
				<div class="row feature">
					<div class="col-md-2">
						<img src="img/18532268486193256.jpg" />
						<p>
							<a href="#">【60-80年代初】香港乐坛的别样风格</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/2890616071712963.jpg" />
						<p>
							<a href="#"> ※清新小电音※让你身临其境畅游浩瀚的大海</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/3439272380522231.jpg" />
						<p>
							<a href="#">听，民谣歌手的诗意告白</a>
						</p>
					</div>
					<div class="col-md-2">
						<img src="img/18822539555919742.jpg" />
						<p>
							<a href="#"> <button style="background-color: red;">电台</button>如何假装很懂奥运? </a>
						</p>
					</div>
					<div class="col-md-4">
					</div>
				</div>
			</div>
			<hr class="divider" />
		</div>

		<!--底部声明-->
		<footer>
				<a style="position: fixed; z-index: 2147483647; display: block;" href="#top" id="scrollUp">
					回到顶部
				</a>
			<p>@ 20160818赵巍</p>
		</footer>
	</body>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script>
		//显示隐藏字段
		$(document).ready(function() {
			$(".imgMB").hover(function() {
				$(".bgtxt").css("display", "block");
			}, function() {
				$(".bgtxt").css("display", "none");
			});
			
		 	$("input").focus(function(){
    			$("input").attr('placeholder','');
 			 		 });
  				$("input").blur(function(){
    			$("input").attr('placeholder','请输入手机号');
 		 });
			
		});
		
	</script>

</html>